<template>
    <div v-loading="loading" class="Main draftsPage">
        <div class="w1440">
            <div class="flex_fsw">
                <div class="MainLeft w72">
                    <div class="HomeNews bgwhite mb15">
                        <div class="HomeTit">
                            <div class="tit">草稿箱</div>
                        </div>
                        <div v-if="darftList.length" class="HomeList">
                            <dl>
                                <dd v-for="(item, index) in darftList" :key="index" class="d-flex a-center j-sb">
                                    <a class="dot">{{item.title}}</a>
                                    <div class="d-flex a-center">
                                        <router-link tag="a" class="editBtn" :to="'/publishUpdates?draftId='+item.id">编辑</router-link>
                                        <div @click="deleteCurrent(item.id)" class="delBtn">删除</div>
                                    </div>
                                </dd>
                            </dl>
                            <!-- 分页 -->
                            <div class="pager d-flex j-center">
                                <el-pagination
                                v-model:current-page="queryParams.pageNo"
                                v-model:page-size="queryParams.pageSize"
                                background
                                layout="prev, pager, next, jumper"
                                :total="queryParams.total"
                                />
                            </div>
                        </div>
                        <el-empty v-else :image-size="200" />


                    </div>
                </div>
                <div class="MainLeftRight  w26">
                    <!-- 热门帖子 -->
                    <HotPost />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="Drafts">
import { postApi } from '@/api';
import { computed, ref, reactive, onBeforeMount, watch } from 'vue';
import { ElMessageBox, ElNotification } from 'element-plus';
import HotPost from '@/components/HotPost.vue'; // 热门帖子

/**
 * @name DATA
 */
const loading = ref(true);

/**
 * @name 生命周期
 */
onBeforeMount(() => {
    getMyDraftList();
})

/**
 * @name 获取列表
 */
const darftList = ref([]);
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    total: 0,
})
const getMyDraftList = () => {
    loading.value = true;
    postApi.getMyDraftList(queryParams).then(res => {
        darftList.value = res.result.list;
        queryParams.total = Number(res.result.total);
    }).catch(err => { }).finally(() => {
        loading.value = false;
    });
}

/**
 * @name 删除草稿
 */
const deleteCurrent = (id) => {
    ElMessageBox.confirm(`确认要删除[id=${id}]草稿吗？`, 
        "提示",
        {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            'close-on-click-modal': false
        }
    )
    .then(() => {
      // 确认删除
      postApi.deleteDraft(id).then(res => {
        getMyDraftList();
        ElNotification({
            title: '提示',
            message: '删除成功',
            type: 'success',
        })
      }).catch(() => {});
      done()
    })
    .catch(() => {
      // catch error
    })
}

// 监听分页
watch(() => queryParams.pageNo, () => {
    getMyDraftList();
})

</script>

<style lang="less" scoped></style>